<template>
    <div class="box">
        <div class="md-l mask">
            <h4>地形列表</h4>
            <TileTable :data="allTiles" @click="changeTile" />
            <h4>地形信息</h4>
            <TileInfo :data="curTile" />
        </div>
        <div class="md-r">
            <div class="md-opt mask">
                <Button type="primary" size="large" title="创建新地图" @click="newmap.show()">
                    <i class="iconfont icon-add"></i>
                </Button>
                <Button type="primary" size="large" title="加载已有地图" @click="loadMaps">
                    <i class="iconfont icon-download"></i>
                </Button>
                <Button type="primary" size="large" title="保存地图数据" @click="saveMap">
                    <i class="iconfont icon-save1"></i>
                </Button>
            </div>
            <div class="md-cvs mask">
                <scroll-view>
                    <canvas ref="cvs"></canvas>
                </scroll-view>
            </div>
        </div>
        <NewMapOption
            :mapData="mapData"
            :wallList="wallList"
            :groundList="groundList"
            ref="newmap"
            @success="createSuccess"
        />
    </div>
</template>
<script>
import { onMounted, reactive, toRefs, ref } from 'vue'
import axios from '../../lib/request.js'
import TileInfo from '../../components/manager/Tile/TileInfo.vue'
import TileTable from '../../components/manager/Tile/TileTable.vue'
import Button from '../../components/common/Button.vue'
import NewMapOption from '../../components/manager/map/NewMapOption.vue'
import Drawer from '../../lib/draw.js'
import ScrollView from '../../components/common/ScrollView.vue'

let TileSrcMap = []
const OperateType = {
    None: 0,
    Create: 1,
    Edit: 2,
    Save: 3
}

export default {
    components: { TileInfo, TileTable, Button, NewMapOption, ScrollView },
    setup() {
        const newmap = ref()
        const cvs = ref()
        const state = reactive({
            currentOperate: OperateType.None,
            allTiles: [],
            curTile: {},
            wallList: [],
            groundList: [],
            mapData: {
                name: '',
                width: 20,
                height: 20,
                wall: {},
                ground: {},
                tiles: []
            }
        })

        let canvas;
        onMounted(async () => {
            const { data } = await axios.get('/map/getAllMapTile')
            state.allTiles = data
            state.curTile = data[0]
            state.wallList = data.filter(e => e.land > 300)
            state.groundList = data.filter(e => e.name.includes('平'))
            state.mapData.wall = state.wallList[0]
            state.mapData.ground = state.groundList[0]
            canvas = cvs.value
            mapSrc(state.allTiles)
        })
        const changeTile = (tile) => {
            state.curTile = tile
            state?.drawer?.setCurrentTileId(tile.id)
        }
        const createSuccess = (result) => {
            state.currentOperate = OperateType.Create
            state.mapData = result
            initMapData(state.mapData)
            state.drawer = new Drawer(canvas, state.mapData, TileSrcMap)
            state.drawer.render()
            state.drawer.setCurrentTileId(state.curTile.id)
            state.drawer.setCanPaint()
        }

        function initMapData(data) {
            let temp
            for (let i = 0; i < data.width; i++) {
                temp = []
                for (let j = 0; j < data.height; j++) {
                    if (i == 0 || j == 0 || i == data.width - 1 || j == data.height - 1) {
                        temp.push(data.wall.id)
                    } else {
                        temp.push(data.ground.id)
                    }
                }
                data.tiles.push(temp)
            }
        }

        const mapSrc = (list) => {
            list.forEach(e => {
                TileSrcMap[e.id] = e.src
            })
        }

        const saveMap = async () => {
            if(state.currentOperate === OperateType.None) return
            const { id, name, width, height, tiles } = state.mapData
            const { data } = await axios.post('/map/saveMap', {
                mapInfo: { id, name, width, height, tiles },
                operate: state.currentOperate
            })
            state.mapData.id = data.data.id
            state.currentOperate = OperateType.Edit
        }

        const loadMaps = async ()=>{
            const {data} = await axios.get('/map/loadMaps')
            console.log(data);
        }
        return {
            ...toRefs(state),
            changeTile,
            newmap, cvs,
            createSuccess,
            saveMap,
            loadMaps
        }
    },
}
</script>
<style lang="less" scoped>
@import "../../theme.less";
@top-height: 50px;
.box {
    display: flex;
    .md-l {
        padding: 10px;
        width: 242px;
        border-right: 2px solid @theme-line;
        h4 {
            font-size: 24px;
            border-bottom: 1px dashed @theme-line;
            border-top: 1px dashed @theme-line;
            margin-bottom: 20px;
            padding: 10px 0;
        }
    }
    .md-r {
        flex: 1 0 0;
        .md-opt {
            height: @top-height;
            border-bottom: 2px solid @theme-line;
        }
        .md-cvs {
            padding: 20px;
            height: calc(100vh - @top-height + 20px);
            overflow: auto;
            width: calc(100% + 20px);
        }
    }
}
</style>